<!--网站home结构-->
<template>
  <div class="common-layout">
    <el-container>
        <el-aside  :class="{'menuWidth':activeable}" v-if="asideFlag">
          <div class="aside-img">
			<div class="icon_menu" @click="changeWidth" title="点击改变左侧导航宽度">
				<el-icon v-if="!activeable"><CaretLeft /></el-icon>
				<el-icon v-if="activeable"><CaretRight /></el-icon>
			</div>
			
            <img src="../assets/imgs/logo.png" alt="logo">
          </div>
<!--          开卡员-->

          <el-menu
              :default-active="activePath"
              class="el-menu-vertical-demo cardCs"
              router
              v-if="checkCardRole()"
			  :collapse="activeable"
          >
<!--            <el-menu-item index="/card/activeCard" @click='saveActive("/card/activeCard")'>-->
<!--              <img src="../assets/imgs/home/addCard.png" alt="addCard">-->
<!--              <span>领 用 出 库</span>-->
<!--            </el-menu-item>-->
            <el-menu-item index="/card/createCard" @click='saveActive("/card/createCard")'>
              <img src="../assets/imgs/home/addCard.png" alt="addCard">
              <span>批 量 生 卡</span>
            </el-menu-item>
            <el-menu-item index="/card/cardList" @click='saveActive("/card/cardList")'>
              <img src="../assets/imgs/home/cardList.png" alt="cardList">
              <span>领 用 历 史</span>
            </el-menu-item>
			<el-menu-item index="/card/loadingList" @click='saveActive("/card/loadingList")'>
			  <img src="../assets/imgs/home/orderHistory.png" alt="loadingList">
			  <span>历 史 订 单</span>
			</el-menu-item>
			<el-menu-item index="/card/newCard" @click='saveActive("/card/newCard")'>
			  <img src="../assets/imgs/home/cardList.png" alt="newCard">
			  <span>未 下 单 卡</span>
			</el-menu-item>
			
          </el-menu>
<!--          菜单管理员-->
          <el-menu
              :default-active="activePath"
              class="el-menu-vertical-demo menuCs"
              router
              v-if="checkMenuRole()"
			  :collapse="activeable"
          >
		  <!--  -->
            <el-menu-item index="/menu/goodsList" @click='saveActive("/menu/goodsList")'>
              <img src="../assets/imgs/home/goodManage.png" alt="addCard">
              <span>菜&nbsp;&nbsp;品&nbsp;&nbsp;管&nbsp;&nbsp;理</span>
            </el-menu-item>
            <el-menu-item index="/menu/goodMoney" @click='saveActive("/menu/goodMoney")'>
              <img src="../assets/imgs/home/goodNum.png" alt="addCard">
              <span>菜品数量管理</span>
            </el-menu-item>
            <el-menu-item index="/menu/vipCard" @click='saveActive("/menu/vipCard")'>
              <img src="../assets/imgs/home/vipManage.png" alt="cardList">
              <span>会 员 卡 管 理</span>
            </el-menu-item>
            <el-menu-item index="/warehouse/loadingGoods" @click='saveActive("/warehouse/loadingGoods")'>
              <img src="../assets/imgs/home/cutOrder.png" alt="addCard">
              <span>截&nbsp;&nbsp;单&nbsp;&nbsp;操&nbsp;&nbsp;作</span>
            </el-menu-item>
<!--            <el-menu-item index="/warehouse/allGoodsList" @click='saveActive("/warehouse/allGoodsList")'>-->
<!--              <img src="../assets/imgs/home/printOrder.png" alt="cardList">-->
<!--              <span>打&nbsp;&nbsp;印&nbsp;&nbsp;标&nbsp;&nbsp;签</span>-->
<!--            </el-menu-item>-->
            <el-menu-item index="/warehouse/loadingList" @click='saveActive("/warehouse/loadingList")'>
              <img src="../assets/imgs/home/orderHistory.png" alt="cardList">
              <span>装&nbsp;&nbsp;配&nbsp;&nbsp;历&nbsp;&nbsp;史</span>
            </el-menu-item>
			<el-menu-item index="/menu/user" @click='saveActive("/menu/user")'>
			  <img src="../assets/imgs/home/vipManage.png" alt="cardList">
		
			  <span>用&nbsp;&nbsp;户&nbsp;&nbsp;管&nbsp;&nbsp;理</span>
			</el-menu-item>
          </el-menu>
<!--          装配员-->
          <el-menu
              :default-active="activePath"
              class="el-menu-vertical-demo warehouseCs"
              router
              v-if="checkWarehouseRole()"
			  :collapse="activeable"
          >
            <el-menu-item index="/warehouse/loadingGoods" @click='saveActive("/warehouse/loadingGoods")'>
              <img src="../assets/imgs/home/cutOrder.png" alt="addCard">
              <span>截 单 操 作</span>
            </el-menu-item>
            <el-menu-item index="/warehouse/allGoodsList" @click='saveActive("/warehouse/allGoodsList")'>
              <img src="../assets/imgs/home/printOrder.png" alt="cardList">
              <span>打 印 标 签</span>
            </el-menu-item>
            <el-menu-item index="/warehouse/loadingList" @click='saveActive("/warehouse/loadingList")'>
              <img src="../assets/imgs/home/orderHistory.png" alt="cardList">
              <span>装 配 历 史</span>
            </el-menu-item>
          </el-menu>
<!--          送货员-->
          <el-menu
              :default-active="activePath"
              class="el-menu-vertical-demo"
              router
              v-if="carRole()"
			  :collapse="activeable"
          >
            <el-menu-item index="/car/deliveryGoods" @click='saveActive("/car/deliveryGoods")'>
              <img src="../assets/imgs/home/addCard.png" alt="addCard">
              <span>待 配 送 单</span>
            </el-menu-item>
            <el-menu-item index="/car/deliveryList" @click='saveActive("/car/deliveryList")'>
              <img src="../assets/imgs/home/cardList.png" alt="cardList">
              <span>配 送 历 史</span>
            </el-menu-item>
          </el-menu>
          <div class="aside-btn">
            <el-button type="primary" @click="exitLog">退出</el-button>
          </div>
        </el-aside>
      <el-main style="overflow-x: auto; min-width: 800px;">
		  <router-view></router-view>
		</el-main>
    </el-container>
  </div>
</template>

<script setup>
	import {
	  User,CaretLeft,CaretRight
	} from '@element-plus/icons-vue'
import {ref, getCurrentInstance, reactive,nextTick, onBeforeMount, onMounted} from 'vue'
  import { useRouter } from "vue-router";
  import { useStore } from "vuex";

  const store = useStore()
  const { proxy } = getCurrentInstance()
  const router = useRouter()
  const menu = ref(null)
  const tokenStr = window.sessionStorage.getItem('token')
  const roles = reactive([])
  const activeable=ref(false)
  const asideFlag=ref(true)
  // 改变侧边导航宽度
  const changeWidth=()=>{
	  activeable.value=!activeable.value
	  asideFlag.value=false
	  nextTick(()=>{
		   asideFlag.value=true
	  })
  }
  // const roles=reactive(['open','menu','aaa','admin'])
  const activePath = ref('')
  onBeforeMount(() => {
    roles.push(window.sessionStorage.getItem('roles'))
  })
  onMounted(() => {
    activePath.value = window.sessionStorage.getItem('activePath')
  })
  // 保持点击对应menu标签使其高亮
  const saveActive = aPath => {
    window.sessionStorage.setItem('activePath', aPath)
    activePath.value = aPath
  }

  const checkCardRole = () => {
    return roles.includes('open')
  }

  const checkMenuRole = () => {
    return roles.includes('menu')
  }

  const checkWarehouseRole = () => {
    return roles.includes('aaa')
  }

  const carRole = () => {
    return roles.includes('admin')
  }

  const exitLog = async () => {
    const {data: res} = await proxy.$http.LogService.exitLog(tokenStr)
    proxy.$message.success('退出成功')
    await store.dispatch('Login/setLoginStatus', false)
    roles.length = 0
    router.push({
      path: '/login'
    })
  }
</script>

<style>
	.icon_menu{
		color: #fff;
		    font-size: 0.4rem;
		    position: absolute;
		    right: 0;
		    top: 50%;
			z-index: 99;
			cursor:pointer;
	}
	.menuWidth{
		width: 5% !important;
	}
   .common-layout, .el-container {
    height: 100%;
  }
  .el-aside{
	  position: relative;
  }
  .el-aside, .el-menu{
    width: 20%;
    background-color: rgb(57,62,74);
  }
  .el-menu {
    height: 65%;
    box-sizing: border-box;
    padding-top: 50px;
	border-right:none ;
  }
  .el-menu-item {
    color: white;
    text-align: center;
    width: 100%;
    font-size: 0.3rem;
    display: flex;
    justify-content: center;
    margin-top: 15px;
    box-sizing: border-box;
  }
   .el-menu-item img {
     margin-right: 15px;
   }
   /*.el-menu:nth-child(1) .el-menu-item:nth-child(1) img {*/
   /*  width: 0.1rem;*/
   /*}*/
   img {
    width: 0.3rem;
  }
   .menuCs .el-menu-item:nth-child(1) img {
     width: 0.4rem;
     margin-right: 20px;
   }
   .menuCs .el-menu-item:nth-child(2) img {
     width: 0.3rem;
   }
   .menuCs .el-menu-item:nth-child(3) img {
     width: 0.3rem;
   }
   .menuCs .el-menu-item:nth-child(4) img {
     width: 0.35rem;
     margin-left: -10px;
   }
   .menuCs .el-menu-item:nth-child(5) img {
     width: 0.35rem;
     margin-left: -10px;
   }
   .menuCs .el-menu-item:nth-child(6) img {
     width: 0.35rem;
     margin-left: -10px;
   }
   .warehouseCs .el-menu-item img{
     width: 0.4rem;
   }
   .warehouseCs .el-menu-item:nth-child(1) img{
     margin-top: -6px;
   }
   .warehouseCs .el-menu-item:nth-child(3) img{
     margin-top: -3px;
   }
  .el-menu-item span {
    text-align: center;
  }
   .el-menu-item.is-active, .el-menu-item.is-active {
     background-color: rgb(0,152,131) !important;
     color: white;
   }
   .el-menu-item.is-active:hover, .el-menu-item:hover {
     background-color: rgb(0,152,131) !important;
     color: white;
   }
   .el-menu-item:hover {
     background-color: #ccc;
     color: white;
   }
   .el-aside ul{
     width: 100% !important;
   }
   .aside-img{
     height: 20%;
     box-sizing: border-box;
     padding-top: 50px;
	 
   }
   .aside-img img{
     width: 80%;
   }
   .aside-btn {
     height: 10%;
   }
   .aside-btn .el-button{
     width: 80%;
     font-size: 0.2rem;
     font-weight: bolder;
     background-color: rgb(0,152,131);
   }
</style>
